
<template>
  <div class="resource-main-box new-page class fzgl-main">
    <a-form-model layout="inline" class="comm-search-f " :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">
      <a-form-model-item label="">
        <airModel v-model="search.model" width="100%" @change="handleTableChange({current:1})" />
      </a-form-model-item>
      <a-form-model-item label="">
        <a-input
          v-model="search.ataId"
          placeholder="章节id"
        >
          <a-icon slot="suffix" :component="require('@/assets/icon/search.svg')" @click="handleTableChange({current:1})" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="">
        <a-input
          v-model="search.name"
          placeholder="章节名称"
        >
          <a-icon slot="suffix" :component="require('@/assets/icon/search.svg')" @click="handleTableChange({current:1})" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="default" ghost :loading="ataListLoading" class="ml-8" @click="resetData">
          重置
        </a-button>

      </a-form-model-item>
    </a-form-model>
    <!-- table -->

    <div class="pt-16 pl-16 pr-16 pb-16 d-flex">
      <div class="ata-tree-box d-flex flex-column">
        <div class="text-color-21252e fs-14 fw-b">ATA章节</div>
        <div class="tree-box-content">
          <VueTree :tree-data="ataTreeData" :tree-click-event="treeClickEvent" name-key="name" children-key="children" />
        </div>

      </div>
      <div class="ata-table-box flex-1 ml-24">
        <a-button type="primary" ghost :loading="ataListLoading" @click="addVisible=true">
          添加
        </a-button>
        <a-table
          :row-key="(row,index) =>row.id+index"
          :columns="columns"
          class="table-border"
          :data-source="ataList"
          :pagination="{
            showTotal:(total)=> `共 ${total} 条数据`,
            showSizeChanger: true,//设置每页显示数据条数
            showQuickJumper: true,
            size:'big',
            current:pagination.pageNum,
            pageSize:pagination.pageSize,
            total:pagination.total
          }"
          :loading="ataListLoading"
          style="margin-top:15px"
          @change="handleTableChange"
        />

      </div>

    </div>
    <!-- add -->
    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :width="514"
      centered
      :dialog-style="{height:'635px'}"
      class="rt-i-modal"
      :confirm-loading="addAtaLoading"
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">{{ addTitle }}ATA章节</div>
      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
      >
        <a-form-model-item label="章节号" prop="ataId">
          <a-input
            v-model="addForm.ataId"
            class="input-type-o"
            placeholder="章节号"
            style="width: 100%"
          />
        </a-form-model-item>
        <a-form-model-item label="名称" prop="name">
          <a-input
            v-model="addForm.name"
            class="input-type-o"
            placeholder="名称"
            style="width: 100%"
          />
        </a-form-model-item>
        <a-form-model-item label="父章节" prop="pid">
          <a-input
            v-model="addForm.pid"
            class="input-type-o"
            placeholder="父章节"
            style="width: 100%"
          />
        </a-form-model-item>
        <a-form-model-item label="机型" prop="model">
          <airModel v-model="addForm.model" class="input-type-o" />
        </a-form-model-item>
        <a-form-model-item label="总章节数" prop="totalAta">
          <a-input-number
            v-model="addForm.totalAta"
            placeholder="总章节数"
            class="input-type-o"
            :min="0"
            style="width: 100%"
          />
        </a-form-model-item>
        <a-form-model-item prop="remark">
          <span slot="label">备注<span class="text-color-9ea5b2 fs-12">选填</span></span>
          <a-textarea
            v-model="addForm.remark"
            style="width: 100%"
            class="input-type-o"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
        </a-form-model-item>

      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import airModel from '@/pages/components/airModel';
import VueTree from '@/pages/components/vueTree';

export default {
  components: {
    airModel,
    VueTree
  },
  data() {
    return {

      search: {},
      sms: [
        {
          value: 0,
          name: '否'
        },
        {
          value: 1,
          name: '是'
        }
      ],
      addVisible: false,
      addForm: {},
      addTitle: '创建新的',
      addRules: Object.freeze({
        ataId: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        pid: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        model: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        totalAta: [
          { required: true, type: 'number', message: '请选择', trigger: 'change' }
        ]
      }),
      columns: Object.freeze([

        {
          title: '章节ID',
          align: 'left',
          dataIndex: 'ataId',
          width: 100,
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '名称',
          align: 'left',
          dataIndex: 'name',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '总章节数',
          align: 'left',
          dataIndex: 'totalAta',
          width: 100,
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '父章节ID',
          align: 'left',
          dataIndex: 'pid',
          width: 100,
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '机型',
          align: 'left',
          dataIndex: 'model',
          width: 100,
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '备注',
          align: 'left',
          dataIndex: 'remark',
          width: 100,
          customRender: (value) => {
            return value || '--';
          }
        },

        {
          title: '操作',
          align: 'center',
          dataIndex: 'option',
          width: 200,
          customRender: (value, record, index) => {
            return [

              <a-button type='link' onClick={() => this.editEventHandler(record)}>修改</a-button>,
              <a-popconfirm
                title='确认删除此项?'
                ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delItemHandler(record)}
              >
                <a-button type='link'>删除</a-button>
              </a-popconfirm>
              // <a-button type='primary' size='small' ghost>版本管理</a-button>
            ];
          }

        }

      ])

    };
  },
  computed: {
    ...mapState('ataPage', [
      'ataListLoading',
      'ataList',
      'addAtaLoading',
      'pagination',
      'ataTreeData'
    ]),
    ...mapGetters('setting', ['sideMenuWidth'])
  },
  mounted() {
    this.getData();
    this.getFtmAtaChapter();
  },
  methods: {
    ...mapActions('ataPage', [
      'getAtaListAll',
      'addFtmAta',
      'updateFtmAta',
      'deleteRepUplinkDestination',
      'getFtmAtaChapter'
    ]),
    ...mapMutations('ataPage', [
      'setState'
    ]),

    resetData() {
      this.search = {};
      this.getData();
    },
    handleTableChange({ current, pageSize = 10 }, params) {
      if (pageSize !== this.pagination.pageSize) {
        current = 1;
      }
      this.setState({ key: 'pagination', payload: { ...this.pagination, pageNum: current, pageSize }});
      this.getData(params);
    },
    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.updateFtmAta(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          } else {
            this.addFtmAta(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelHandler() {
      this.addForm = {};
      this.addTitle = '创建新的';
      this.$refs.addForm.resetFields();
    },
    // 编辑
    editEventHandler(record) {
      this.addVisible = true;
      this.addForm = { ...record };
      this.addTitle = '修改';
    },
    // 确认删除
    delItemHandler(record) {
      const { id } = record;
      this.deleteRepUplinkDestination({ id });
      this.getData();
    },
    // 重置
    resetSearchHandler() {
      this.search = {};
      this.getData();
    },
    getData(params) {
      const apiParams = {
        ...this.search,
        ...params
      };
      this.getAtaListAll(apiParams);
    },
    treeClickEvent({ ataId }) {
      this.handleTableChange({ current: 1 }, { ataId });
    }
  }
};
</script>

<style lang="less">
.fzgl-main{

  .ant-table-tbody > tr > td {
    border-bottom: unset;
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .ant-table-row-cell-break-word {
    padding: 0 !important;
  }

.ata-tree.ant-tree{
   li ul{
    padding: 0px!important;
    li{
      padding-left: 32px!important;
    }
  }
}
.caret-down-icon{
     font-size: 18px!important;
    margin-top: 4px!important;
}
.ant-tree-switcher-noop{
  display: none !important;
}
.ata-tree>li{
  &::after{
    display: none;
  }
}
  .tree-box-content{
    width: 224px!important;
  background-color: #F9F9FB;
  }
.ata-tree-box{
  width: 224px;

.vue-tree{
  height: 757px;
  overflow-y: auto;
  .beauty-scroll()
 }
}
}

</style>
